<template>

  <el-maim>

    <div class="app-container">

          <el-form
            :inline="true"
            class="demo-form-inline"
            style="margin-bottom: 10px">
            <el-button type="primary" icon="el-icon-download" @click="exportData">导出</el-button>
            <el-button icon="el-icon-upload2" @click="uploadData">导入</el-button>
          </el-form>

          <!-- 上传弹框层 -->
          <el-dialog title="导入" :visible.sync="dialogImportVisible" width="480px">
            <el-form label-position="right" label-width="170px">
              <el-form-item label="文件">
                <el-upload
                  :multiple="false"
                  :on-success="onUploadSuccess"
                  :data="uploadHeader"
                  :action="'http://localhost:5577/api/resource/city/importCity'"
                  class="upload-demo"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">
                    只能上传xls文件,且不超过500kb
                  </div>
                </el-upload>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogImportVisible = false"> 取消 </el-button>
            </div>
          </el-dialog>
              <!--
                  data属性:表格数据
                  border属性:表格边框
                  stripe属性;表格斑马线
                  row-key属性:行数据的Key，用来优化 Table的渲染
                  default-expand-all属性:默认展开树形表格数据
                  tree-props属性：树形表格配置属性选型
              -->
          <el-table
            :data="cityList"
            style="width: 100%"
            row-key="id"
            border
            lazy
            :load="getChildData"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
              <el-table-column label="名称" width="230" align="left">
                <template slot-scope="scope">
                  <span>{{ scope.row.cityZh }}</span>
                </template>
              </el-table-column>

              <el-table-column label="编码" width="220">
                  <template slot-scope="{ row }">
                    {{ row.id }} 
                  </template>
              </el-table-column>

              <el-table-column label="代号" width="230" align="left">
                <template slot-scope="scope">
                  <span>{{ scope.row.leaderEn }}</span>
                </template>
              </el-table-column>

              <el-table-column label="创建时间" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.createTime }}</span>
                </template>
              </el-table-column>
          </el-table>

          </div>

  </el-maim>
  
  
</template>


<script>
import cityApi from "@/api/resource/city";
//导入token
import {getToken} from '@/utils/auth'

export default {
  data() {
    return {
      cityList: [], //省级列表
      dialogImportVisible: false,
      //上传需要携带的数据
      uploadHeader:{"Authorization":getToken()},

    };
  },

  created() {
    this.getProvinceList();
  },

  methods: {
    //上传数据词典数据
    uploadData() {
      this.dialogImportVisible = true;
    },

    //上传成功调用
    onUploadSuccess(file) {
      console.log(file);
      this.$message.success("上传成功");
      this.dialogImportVisible = false;
      this.getProvinceList();
    },

    //导出数据词典数据
    exportData() {
      window.location.href = "http://localhost:5577/api/resource/city/exportCity?Authorization="+this.$store.getters.token;
    },

    //获取数据词典数据
    getCityList(parentName) {
      cityApi
        .getCityListByParentName(parentName)
        .then((res) => {
          if (res.code == 200) {
            this.cityList = res.data;
          }
        })
        .catch((e) => {
          this.$message.error("获取城市列表失败");
        });
    },

    getProvinceList(){
      cityApi.getCityListByLeaderCode({ leaderCode: 10000 })
             .then((res) => {
                if (res.code == 200) {
                  this.cityList = res.data;
                }
              })
              .catch((e) => {
                this.$message.error("获取城市列表失败");
              });
    },

    //是否有子节点
    getChildData(tree, treeNode, resolve) {
      cityApi
        .getCityListByLeaderCode({ leaderCode: tree.id })
        .then((res) => {
           resolve(res.data);
        })
        .catch((e) => {
          this.$message.error("获取子节点失败");
        });
    },
  },
};
</script>